<template>
  <!-- footer -->
  <div class="footer-box">
    <ul class="top-header">
      <li
        :class="current === index ? 'active' : ''"
        v-for="(item, index) in list"
        :key="index"
        @click="liClick(index)"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="content-box">
      <transition name="fade" mode="out-in">
        <component :is="view"></component>
      </transition>
    </div>
    <div class="bottom-box">
      {{ bottomContent }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "Our App"
        },
        {
          name: "Store"
        },
        {
          name: "Support"
        },
        {
          name: "Legal notice and cookies"
        },
        {
          name: "Follow NighShop"
        }
      ],
      current: 0,
      bottomContent:
        "Copyright © NighShop all rights reserved. Powered by NighShop",
      view: "FirstBox"
    };
  },

  components: {
    FirstBox: () => import("./firstBox"),
    SecondBox: () => import("./secondBox"),
    ThreeBox: () => import("./ThreeBox"),
    FourBox: () => import("./FourBox"),
    FiveBox: () => import("./FiveBox"),
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    liClick(idx) {
      if (idx === this.current) return;
      this.current = idx;
      switch (idx) {
        case 0:
          this.view = "FirstBox";
          break;
        case 1:
          this.view = "SecondBox";
          break;
        case 2:
					this.view = "ThreeBox";
          break;
        case 3:
					this.view = "FourBox";
          break;
        case 4:
					this.view = "FiveBox";
          break;
      }
    }
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.footer-box {
  // min-height: 377px;
  background: #000;
	color: #fff;
	padding-bottom: 10px;

  ul.top-header {
    margin: 0;
    padding: 0;
    display: flex;
		justify-content: center;
		flex-wrap: wrap;
    padding-top: 50px;
    margin-bottom: 50px;
    li {
      padding-bottom: 2px;
      list-style: none;
      margin-left: 32px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.3s linear;

      &:first-child {
        margin-left: 0;
      }

      &.active {
        border-color: #fff;
      }
    }
  }
  .content-box {
    
    display: flex;
    justify-content: center;
  }
  .bottom-box {
    margin: 86px 0 0;
    text-align: center;
    color: #999;
    font-size: 14px;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  .fade-enter, .fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>
